<template>
  <div class="shard-index-container">
    <el-table :data="shardList" border max-height="700px">
      <el-table-column label="序号" prop="shardIndex" align="center" width="55" />
      <el-table-column label="分片内容" prop="shardContent" />
      <el-table-column label="已同步" prop="synced" align="center" width="80">
        <template #default="{ row }">
          <div>{{ row.synced ? '是' : '否' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="synced" align="center" width="100">
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['web:lm:kb:sdkLmKbShard:edit']"
          >
            修改
          </el-button>
          <el-button
            link
            type="primary"
            icon="Delete"
            @click="handleDelete(scope.row)"
            style="color: red"
            v-hasPermi="['web:lm:kb:sdkLmKbShard:remove']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="title"
      v-model="open"
      width="1500px"
      append-to-body
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="页码" prop="pageNumber">
          <el-input-number v-model="form.pageNumber" placeholder="请输入页码" />
        </el-form-item>
        <el-form-item label="位置" prop="position">
          <el-input v-model="form.position" placeholder="请输入位置" />
        </el-form-item>
        <el-form-item label="字符位置" prop="charPosition">
          <el-input v-model="form.charPosition" placeholder="请输入字符位置" />
        </el-form-item>
        <el-form-item label="分片序号" prop="shardIndex">
          <el-input-number v-model="form.shardIndex" placeholder="请输入分片序号" />
        </el-form-item>

        <el-form-item label="是否已同步到向量库" prop="synced">
          <el-select v-model="form.synced" placeholder="请选择">
            <el-option label="是" :value="true" />
            <el-option label="否" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="分片内容" prop="shardContent">
          <el-input type="textarea" v-model="form.shardContent" placeholder="请输入分片内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
  import modal from '@/plugins/modal';
  import { ref, watch } from 'vue';

  import {
    addSdkLmKbShard,
    delSdkLmKbShard,
    getSdkLmKbShardInfo,
    pageSdkLmKbShard,
    updateSdkLmKbShard,
  } from '@/api/intelligencebase/sdkLmKbShard';

  const props = defineProps({
    params: {
      type: Object,
      default: () => ({}),
    },
    commonIdsParams: {
      type: Object,
      default: () => ({}),
    },
  });

  const pageShardParams = ref({
    pageNum: 1,
    pageSize: 10,
  });
  const form = ref({});
  const formRef = ref(null);
  const rules = ref({});
  const shardList = ref([]);
  const title = ref('');
  const open = ref(false);
  watch(
    () => props.params,
    (val) => {
      if (!val) return;
      getList();
    },
    { immediate: true },
  );
  // 切片管理按钮
  function getList() {
    pageSdkLmKbShard(pageShardParams.value, {
      ...props.commonIdsParams,
      ...props.params,
    }).then((res) => {
      console.log({ res });
      const { records } = res.data;
      shardList.value = records;
    });
  }

  function handleDelete(row) {
    const _ids = row?.id;
    modal
      .confirm('是否确认删除数智融合-智库切片编号为"' + _ids + '"的数据项？')
      .then(() => {
        return delSdkLmKbShard(_ids);
      })
      .then(() => {
        getList();
        modal.msgSuccess('删除成功');
      })
      .catch(() => {});
  }

  function reset() {
    form.value = {
      id: null,
      industryId: props.commonIdsParams.industryId,
      catId: props.commonIdsParams.catId,
      kbId: props.commonIdsParams.kbId,
      shardIndex: null,
      shardContent: null,
      synced: null,
      pageNumber: null,
      position: null,
      charPosition: null,
      createBy: null,
      createTime: null,
      updateBy: null,
      updateTime: null,
    };
    formRef.value?.resetFields();
  }

  function handleUpdate(row) {
    reset();
    const _id = row?.id;
    getSdkLmKbShardInfo(_id).then((res) => {
      form.value = res.data;
      console.log({ detail: res.data });
      title.value = '修改数智融合-智库切片';
      open.value = true;
    });
  }
  function cancel() {
    open.value = false;
    reset();
  }
  function submitForm() {
    formRef.value.validate((valid) => {
      if (valid) {
        console.log({ form: form.value });
        if (form.value.id) {
          updateSdkLmKbShard(form.value).then(() => {
            modal.msgSuccess('修改成功');
            open.value = false;
            getList();
          });
        } else {
          addSdkLmKbShard(form.value).then(() => {
            modal.msgSuccess('新增成功');
            open.value = false;
            getList();
          });
        }
      }
    });
  }
  defineExpose({
    getList,
  });
</script>
<style lang="scss" scoped>
  .shard-index-container {
    padding: 0 20px;
  }
</style>
